<template>
  <view class="container">
    <!-- 顶部背景区域 -->
    <view class="header-bg">
      <!-- 用户信息卡片 -->
      <view class="user-card" @click="goToProfile">
        <view class="user-info">
          <view class="avatar">
            <image class="avatar-img" src="/static/avatar-default.png" mode="aspectFill"></image>
            <text class="avatar-text">{{
              userInfo.realName?.charAt(0) || userInfo.name?.charAt(0) || userInfo.username?.charAt(0) || "未"
            }}</text>
          </view>
          <view class="user-details">
            <view class="user-name">
              <image src="/static/rz.png" class="rz-icon" v-if="userInfo.status == 3"></image>
              <text class="username" @click="goToLogin">{{
                userInfo.realName || userInfo.name || userInfo.username || "请登录"
              }}</text>
            </view>

            <!-- <text class="user-desc" v-if="userInfo.id">ID: {{ userInfo.id || "-" }}</text> -->
          </view>
        </view>
        <view class="user-actions" v-if="userInfo.status == 1">
          <view class="edit-btn" @click.stop="editProfile">
            <text class="edit-text">去认证</text>
          </view>
        </view>
      </view>

      <!-- 数据统计卡片 -->
      <view class="stats-card">
        <!-- <view class="stat-item" @click="goToWallet">
          <text class="stat-value">¥0.00</text>
          <text class="stat-label">余额</text>
        </view> -->
        <view class="stat-divider"></view>
        <view class="stat-item" @click="goToBorrow">
          <text class="stat-value">¥ {{ fundOverview.borrowedAmount }}</text>
          <text class="stat-label">借入</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @click="goToLend">
          <text class="stat-value">¥ {{ fundOverview.lentAmount }}</text>
          <text class="stat-label">借出</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 常用功能 -->
      <!-- <view class="section">
        <view class="section-title">
          <text class="title-text">常用功能</text>
        </view>
        <view class="function-grid">
          <view class="function-item" @click="goToWallet">
            <view class="function-icon wallet">
              <text class="icon">💰</text>
            </view>
            <text class="function-text">我的钱包</text>
          </view>
          <view class="function-item" @click="goToInvite">
            <view class="function-icon invite">
              <text class="icon">🎁</text>
            </view>
            <text class="function-text">邀请有礼</text>
          </view>
          <view class="function-item" @click="goToBorrow">
            <view class="function-icon borrow">
              <text class="icon">📥</text>
            </view>
            <text class="function-text">借入管理</text>
          </view>
          <view class="function-item" @click="goToLend">
            <view class="function-icon lend">
              <text class="icon">📤</text>
            </view>
            <text class="function-text">借出管理</text>
          </view>
        </view>
      </view> -->

      <!-- 服务中心 -->
      <view class="section">
        <view class="section-title">
          <text class="title-text">服务中心</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="goToSettings">
            <view class="menu-left">
              <view class="menu-icon settings">
                <text class="icon">⚙️</text>
              </view>
              <text class="menu-title">设置</text>
            </view>
            <view class="menu-right">
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
          <view class="menu-item" @click="goToHelp">
            <view class="menu-left">
              <view class="menu-icon help">
                <text class="icon">❓</text>
              </view>
              <text class="menu-title">帮助中心</text>
            </view>
            <view class="menu-right">
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
          <view class="menu-item" @click="goToAbout">
            <view class="menu-left">
              <view class="menu-icon about">
                <text class="icon">ℹ️</text>
              </view>
              <text class="menu-title">关于我们</text>
            </view>
            <view class="menu-right">
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
          <view class="menu-item" @click="changePassword">
            <view class="menu-left">
              <view class="menu-icon security">
                <text class="icon">🔒</text>
              </view>
              <text class="menu-title">修改密码</text>
            </view>
            <view class="menu-right">
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="section">
        <view class="logout-btn" @click="logout">
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import request from "@/api/request.js";

const userInfo = ref({});
const isLoggedIn = ref(false);
const fundOverview = ref({
  borrowedAmount: "0.00",
  lentAmount: "0.00",
  paidAmount: "0.00",
  payableAmount: "0.00",
  receivableAmount: "0.00",
  receivedAmount: "0.00",
});
// 页面加载时获取用户信息
onMounted(() => {
  loadUserInfo();
});

// 页面显示时获取用户信息
onShow(() => {
  getContractCount();
});
// 加载用户信息
const loadUserInfo = () => {
  const savedUserInfo = uni.getStorageSync("userInfo");
  if (savedUserInfo) {
    userInfo.value = { ...userInfo.value, ...savedUserInfo };
    isLoggedIn.value = true;
  }
};
const goToLogin = () => {
  if (!userInfo.value?.realName) {
    uni.navigateTo({
      url: "/pages/login/index",
    });
  }
};
// 跳转到个人资料
function goToProfile() {
  console.log("跳转到个人资料");
}

// 编辑个人资料
function editProfile() { }



// 跳转到我的钱包
function goToWallet() {
  console.log("跳转到我的钱包");
}

// 跳转到借入/债务
function goToBorrow() {
  console.log("跳转到借入/债务");
}

// 跳转到借出/债权
function goToLend() {
  console.log("跳转到借出/债权");
}
function changePassword() {
  uni.navigateTo({
    url: "/pages/mine/resetPassword",
  });
}


// 跳转到设置
function goToSettings() {
  console.log("跳转到设置");
}

// 跳转到帮助中心
function goToHelp() {
  console.log("跳转到帮助中心");
}

// 跳转到关于我们
function goToAbout() {
  console.log("跳转到关于我们");
}
// 获取统计数据
const getContractCount = async () => {
  if (!isLoggedIn.value) return;
  let res = await request.get("/api/contracts/dashboard");
  if (res.code === 200) {
    fundOverview.value = res.data.fundOverview;
  }
};
// 退出登录
function logout() {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        console.log("用户确认退出登录");
        // 清除用户信息
        uni.removeStorageSync("userInfo");
        // 这里添加退出登录的逻辑
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }
    },
  });
}
</script>

<style>
.container {
  height: calc(100vh - 88rpx);
  background: #f5f7fa;
}

/* 顶部背景区域 */
.header-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  position: relative;
}

/* 用户信息卡片 */
.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 60rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.avatar-text {
  font-size: 40rpx;
  font-weight: 700;
  color: #fff;
  z-index: 1;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.rz-icon {
  width: 40rpx;
  height: 40rpx;
}

.username {
  font-size: 36rpx;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.user-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.user-actions {
  display: flex;
  align-items: center;
}

.edit-btn {
  padding: 6rpx 14rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.edit-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.edit-text {
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
}

/* 数据统计卡片 */
.stats-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  flex: 1;
  transition: all 0.3s ease;
}

.stat-item:active {
  transform: scale(0.95);
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #1e293b;
}

.stat-label {
  font-size: 24rpx;
  color: #64748b;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: #e2e8f0;
}

/* 主要内容区域 */
.main-content {
  padding: 30rpx;
}

/* 分组标题 */
.section {
  margin-bottom: 30rpx;
}

.section-title {
  padding: 0 0 20rpx 0;
}

.title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #1e293b;
}

/* 功能网格 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
  transition: all 0.3s ease;
}

.function-item:active {
  transform: scale(0.9);
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-icon .icon {
  font-size: 36rpx;
  color: #fff;
}

.function-text {
  font-size: 24rpx;
  color: #64748b;
  font-weight: 500;
  text-align: center;
}

/* 菜单列表 */
.menu-list {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
  overflow: hidden;
}

.menu-item {
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #f8fafc;
  transition: all 0.3s ease;
  position: relative;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #f8fafc;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25rpx;
}

.menu-icon .icon {
  font-size: 32rpx;
  color: #fff;
}

.menu-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1e293b;
}

.menu-right {
  display: flex;
  align-items: center;
}

/* 图标颜色 */
.wallet {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.invite {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.borrow {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.lend {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.security {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.settings {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.help {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.about {
  background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
}

/* 退出登录按钮 */
.logout-btn {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
  transition: all 0.3s ease;
}

.logout-btn:active {
  background: #fef2f2;
  transform: scale(0.98);
}

.logout-text {
  font-size: 30rpx;
  color: #ef4444;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .header-bg {
    padding: 30rpx 20rpx 20rpx;
  }

  .main-content {
    padding: 20rpx;
  }

  .function-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    padding: 30rpx 15rpx;
  }

  .menu-item {
    padding: 25rpx 30rpx;
  }

  .stats-card {
    padding: 25rpx;
  }
}
</style>
